<template>
    <div class="form-list-wrap page-select-win"
         :class="{ 'page-select-h5': queryPageType == 2, 'page-select-pc': queryPageType == 5, 'page-select-bs': queryPageType == 1 }">
        <app-cate v-model="appId" v-if="showAppCate" style="width: 140px;height: auto;min-width: auto;"></app-cate>
        <div class="m-table-container">
            <div class="query-search-thin" style="margin-bottom: 10px;">
                <el-form :inline="true" size="mini" @submit.native.prevent>
                    <el-form-item>
                        <el-input placeholder="页面名称查询" v-model="queryText"
                                  class="input-with-select" clearable
                                  @clear="refresh" @keyup.enter.native="refresh">
                            <el-button slot="append" icon="el-icon-search" @click="refresh()"></el-button>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="page-select-container">
                <div class="page-card" :class="{ 'page-card-web': $putils.isPageTypeWeb(p) }" v-for="p in pages"
                     v-resp="{ type: 'c24', container: 'parent', smc: 6, mdc: 4, lgc: 4, xlc: 2 }" style="padding: 0 5px;height: auto;">
                    <page-thumb :img="$utils.get(p, 'cover.file_path')" :ratio-height="queryPageType == 2 ? '150%': '70%'"
                                :mode="queryPageType == 2 ? 'h5': 'web'" @click.native="handleSelect(p)">
                        <div class="page-code" v-text="p.page_code" v-copy="p.page_code"
                             v-tippy="{ arrow: true, placement : 'left' }" content="点击复制"></div>
                        <!--<i class="page-card-action fa fa-eye preview" v-tippy="{ arrow: true, placement : 'left' }" content="预览"
                           @click="preview(p)"></i>-->
                        <!--<i class="page-card-action fa" :class="isPageTypeDesign(p) ? 'fa-palette' : 'fa-edit1'"
                           v-tippy="{ arrow: true, placement : 'left' }" :content="isPageTypeDesign(p) ? '设计' : '修改'"
                           @click="handlePageShowEdit(p)"></i>
                        <i class="page-card-action fa fa-laptop-code lowcode" v-tippy="{ arrow: true, placement : 'left' }" content="低码开发"
                           @click="handlePageShowSetting(p)"></i>-->

                        <i class="page-card-action fa fa-check" :class="{ 'selected': currentPage && p.page_id === currentPage.page_id }"></i>
                    </page-thumb>
                    <div class="page-info">
                        <i class="page-type fa" :class="{
                        'fa-mobile-alt': $putils.isPageTypeH5(p),
                        'fa-laptop': $putils.isPageTypePc(p),
                        'fa-th': $putils.isPageTypeBs(p),
                        'fa-link page-type-link': $putils.isPageTypeLink(p),
                        'page-type-design': $putils.isPageTypeDesign(p),
                        'page-type-custom': $putils.isPageTypeCustom(p)
                       }"></i>
                        <div class="page-title" v-text="p.page_name"></div>
                    </div>
                </div>
            </div>
            <el-pagination
                    @size-change="refresh"
                    @current-change="refresh"
                    :current-page.sync="pagination.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size.sync="pagination.pageSize"
                    :layout="layouts"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <div class="page-select-preview" v-if="queryPageType == 2">
            <div class="page-select-preview-body">
                <page-items v-if="currentPage && currentPage.page_id" :in-page-id="currentPage.page_id"
                            @selectItem="handleSelectItem" style="border-left: 1px solid #EEE;"></page-items>
                <div v-else class="page-select-preview-empty">H5页面预览</div>
            </div>
            <div class="page-select-preview-actions" v-if="selectedItem && selectedItem.page_item_code">
                <el-button type="primary" size="small" @click="handleCopyItem"
                           v-tippy="{ arrow: true }" content="复制后完全独立修改">【复制】选中模块</el-button>
                <el-button type="primary" size="small" @click="handleReferItem"
                           v-tippy="{ arrow: true }" content="引用的模块统一修改">【引用】选中模块</el-button>
            </div>
        </div>

        <el-dialog v-if="queryPageType !== 2" :title="'页面预览：' + currentPage.page_name" :visible.sync="pagePreviewShow"
                   custom-class="m-dialog-fullscreen" :append-to-body="true">
            <!--<page-items v-if="currentPage && currentPage.page_id" :in-page-id="currentPage.page_id"
                        @selectItem="handleSelectItem"></page-items>-->
            <div class="page-select-preview">
                <div class="page-select-preview-body">
                    <page-items v-if="currentPage && currentPage.page_id" :in-page-id="currentPage.page_id"
                                @selectItem="handleSelectItem"></page-items>
                </div>
                <div class="page-select-preview-actions" v-if="selectedItem && selectedItem.page_item_code">
                    <el-button type="primary" size="small" @click="handleCopyItem"
                               v-tippy="{ arrow: true }" content="复制后完全独立修改">【复制】选中模块</el-button>
                    <el-button type="primary" size="small" @click="handleReferItem"
                               v-tippy="{ arrow: true }" content="引用的模块统一修改">【引用】选中模块</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import _ from 'lodash';
    import PageItems from './page-items';

    export default {
        props: {
            mode: String,
            appId: Number,
            queryPageType: 0
        },
        data() {
            return {
                type: [],       // h5 | web | custom | all
                showAppCate: true,      // 是否显示APP分类筛选
                defaultAppId: null,     // 默认APP ID

                // 查询
                queryText: "",

                // 列表
                pages: [],
                loading: false,
                pagination: {
                    page: 1,
                    pageSize: 50,
                    count: 0
                },
                currentPage: { page_id: null },
                selectedItem: null,

                pagePreviewShow: false,
            }
        },
        components: {
            PageItems
        },
        created () {

        },
        mounted () {

        },
        watch: {
            'appId'(val) {
                this.loadStat();
                this.refresh();
            },
            'currentPage.page_id'() {
                this.selectedItem = null;
            }
        },
        filters: {},
        computed: {
            layouts() {
                let layout = 'total, sizes, prev, pager, next';

                if(this.queryPageType == 1 || this.queryPageType == 5) {
                    layout = 'total, sizes, prev, next';
                }
                return layout;
            }
        },
        methods: {
            async init() {
                this.queryText = '';
                this.pagination.page = 1;

                this.loadStat();
                this.refresh();
            },
            async refresh() {
                let type = [];

                if(this.queryPageType == 26) {
                    type = [ 2, 6 ];
                } else if(this.queryPageType == 53) {
                    type = [ 5, 3 ];
                } else if(this.queryPageType == 17) {
                    type = [ 1, 7 ];
                } else if(this.queryPageType == 367) {
                    type = [ 3, 6, 7 ];
                } else {
                    type = this.queryPageType;
                }

                let ret = await this.$japi.page.getPageList(_.defaults({ type }, {
                    type,
                    page_name: this.queryText,
                    app_id: this.appId
                }), this.pagination);
                this.pages = _.get(ret, 'rows', []);
                this.pagination.total = _.get(ret, 'count', 0);
            },
            async loadStat() {
                if(!this.queryPageType) return;

                /*let stats = await this.$japi.page.appPageStatByType(this.queryPageType);
                let total = 0;

                for(let s in stats) total += Number(stats[ s ] || 0);

                if(stats) {
                    stats[ 26 ] = Number(stats[ 2 ] || 0) + Number(stats[ 6 ] || 0);
                    stats[ 53 ] = Number(stats[ 3 ] || 0) + Number(stats[ 5 ] || 0);
                    stats[ 17 ] = Number(stats[ 1 ] || 0) + Number(stats[ 7 ] || 0);
                    stats[ 367 ] = Number(stats[ 3 ] || 0) + Number(stats[ 6 ] || 0) + Number(stats[ 7 ] || 0);
                    stats[ 0 ] = total;
                }
                this.stats = stats;*/
            },
            async handleSelect(page) {
                this.currentPage = page;
                this.pagePreviewShow = true;
            },
            handleSelectItem(data) {
                let item = _.get(data, 'item');
                this.selectedItem = item;
            },
            handleCopyItem(isRefer = false) {
                if(!this.selectedItem) {
                    this.$jui.toast("先选择复制的模块！");
                    return;
                }

                this.$emit("copyItem", this.selectedItem);
            },
            handleReferItem() {
                if(!this.selectedItem) {
                    this.$jui.toast("先选择复制的模块！");
                    return;
                }

                this.$emit("referItem", this.selectedItem);
            }
        }
    }
</script>
